<template>
  <div class="payType">
    <div class="tit">
      支付方式
      <span>支払い方式</span>
    </div>
    <div class="select">
      <div class="wx pay" @click="payType=!payType">
        <img class="icon" src="../assets/images/wx.png" alt="">
        <span>微信支付</span>
        <img v-if="payType" class="lable" src="../assets/images/lab.png" alt="">
        <img v-else class="lable" src="../assets/images/lab_active.png" alt="">
      </div>
      <div class="aliPay pay" @click="payType=!payType">
        <img class="icon" src="../assets/images/pay.png" alt="">
        <span>支付宝支付</span>
        <img v-if="!payType" class="lable" src="../assets/images/lab.png" alt="">
        <img v-else class="lable" src="../assets/images/lab_active.png" alt="">
      </div>
    </div>
    <button class="confimpay" @click="confimpay">确认支付</button>
  </div>
</template>

<script>
export default {

  data () {
    return {
      payType:false
    }
  },

  methods: {
    slelctPay(){

    },
    confimpay(){
      console.log(this.payType)
    }
  },

  created () {
  }
}
</script>

<style lang='less' scoped>
.payType{
  .select{
    background: #FFFFFF;
    border: 1px solid #E7E7E7;
    box-shadow: 1px 8px 18px 0 rgba(0,0,0,0.03);
    border-radius: 15px;
    margin: 15px 0;
    .pay{
      margin-left:20px;
      padding: 10px 0;
      border-bottom:1px  solid #E7E7E7;
      .icon{
        width:28px;
        vertical-align: middle;
      }
      span{
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        display: inline-block;
        line-height: 29px;
        vertical-align: middle;
      }
      .lable{
        width:19px;
        vertical-align: middle;
        float:right;
        margin-right: 20px;
        margin-top: 6px;
      }
    }
    .aliPay{
      border-bottom:none;
    }
  }
  .confimpay{
      background: #FDDF00;
      border-radius: 100px;
      width:80%;
      height:45px;
      font-size: 16px;
      color: rgba(51,51,51,0.85);
      letter-spacing: 0.11px;
      text-align: center;
      border: none;
      position: absolute;
      bottom: 20px;
      left:10%;
  }
}
</style>
